AS: Animated Buttons

[Inglor]

AS: Main, CHEESESTEAK!!!!

TUTORIAL MX 2004+ complaint, uses symbols and you should also know how to use simple frame actions explained here

Hey, this has been asked several times before so I figured I'll explain it this will cover simple AS used to create animated buttons that play an animation when you roll out of them, and one when you press them

for starters, use a movieclip insead of a button, this is because movieclips let us manipulate frames better then buttons

create 4 frames in this movieclip you have created:

frame 1 is a static image containing how the button looks when there is nothing associated with it happening
frame 2 is an animation (movieclip) of it when you rollOver it, (like "over" in buttons)
frame 3 is an animation (movieclip) of it when you rollOut (this is the part buttons don't have)
frame 4 is an animation of it when you press it (like "down" in buttons)

after all your animations is set, go to the animation in frame 2 (the "over") and on it's last frame put the following actions:

stop();

this is to stop it from constantly playing, repeat this process for the animation in frame 4

now go to the animation in frame 3 (the "rollOut" part) and go to the last frame, put these actions in it:

_parent.gotoAndStop(1);

then give it (the main movieclip) these actions
onClipEvent(load){
stop();
}
on(rollOver){
gotoAndStop(2);
}
on(rollOut){
gotoAndStop(2);
}
on(press){
gotoAndStop(4);
}

hope this helped :)

[Denvish]

Yup. I've always used MCs in preference to buttons, they're just a lot more versatile. Probably comes from starting out using Flash to build websites.

[Mogly]

your tutorials never stop amazing me : )

[Glaiel-Gamer]

mmmmmmm......... as main cheesesteak........

[ReNaeNae]

...so, say you have a button set up the way you described... on over you want a long box to slide out from behind it... and when you move away from the button, the long box would retract. How would you get it to retract smoothly... from any point... if the viewer moves the mouse away before the long box is fully out? ...I know I didn't explain that very well, but hopefully you get what I mean!

[Denvish]

At 8/28/05 07:35 PM, ReNaeNae wrote: ...so, say you have a button set up the way you described... on over you want a long box to slide out from behind it... and when you move away from the button, the long box would retract. How would you get it to retract smoothly... from any point... if the viewer moves the mouse away before the long box is fully out? ...I know I didn't explain that very well, but hopefully you get what I mean!

You're getting a little more complex there. I'd probably have a slider MC inside the 'button', and use something like this:

onClipEvent(rollOver){
slidingout=1;
}
onClipEvent(rollOut, dragOut, releaseOutside){
slidingout=0;
}
onClipEvent(enterFrame){
if(!slidingout){
if(slider._x >0){ slider._x-=3;}
}else{
if(slider._x <100){ slider._x+=3;}
}
}

Haven't tested it.

[Inglor]

At 8/28/05 07:35 PM, ReNaeNae wrote: but hopefully you get what I mean!

I did, it IS a bit more complex, you can give all the movies instance names and play with _currentframe and _totalframes or you could make it reverse instaed of stopping it
instead of putting the actions on the movieclip do the following:

only have 1 movieclip
in it have only the rollOver animation,
(I'm assuming the over and out animations are reversed to eachother)
use this code

onClipEvent(load){
stop();
}
onClipEvent(enterFrame){
if(dir=="over"){
nextFrame();
}else if(dir=="out"){
prevFrame();
}
}
on(rollOver){
dir="over";
}
on(rollOut){
dir="out";
}

with this script I'm actually reversing the playback instead of having different movieclips for over and out

[Mogly]

i just noticed you made a mistake (inglors first post i mean), on the final script bit instead of

on roll out goto and stop (3)

you had (2)

nothing much really but newbies wont notice this and think theres just a problem, or am i just getting something wrong?

[Rhinan]

At 8/28/05 05:32 PM, Denvish wrote: Yup. I've always used MCs in preference to buttons, they're just a lot more versatile. Probably comes from starting out using Flash to build websites.

yeah i guess that's true, but here's two things:
1) The only positive change with normal buttons, is that you have a RollOut fuctions, but that's not so important is it?
2) MY BUTTON WON'T WORK!!! When i hold my mouse over it, it goes to the fourth animation and stops at his first frame.

Please, anyone give an answer to the second note (i was so kind not making another topic just for this, and avoid irritating people =D).

hoping for response,
--Rhinan

[Xolo]

this dosent make any sense! how teh hell are u suppost to animate it in one frame!?

[authorblues]

At 12/5/05 06:19 PM, Bounty-Hunter-Clock wrote: this dosent make any sense! how teh hell are u suppost to animate it in one frame!?

put an animated MC in that one frame...

[Madferit]

At 12/5/05 06:26 PM, authorblues wrote:

At 12/5/05 06:19 PM, Bounty-Hunter-Clock wrote: this dosent make any sense! how teh hell are u suppost to animate it in one frame!?

put an animated MC in that one frame...

lol, n00b

[Rhinan]

then give it (the main movieclip) these actions
onClipEvent(load){
stop();
}
on(rollOver){
gotoAndStop(2);
}
on(rollOut){
gotoAndStop(2);
}
on(press){
gotoAndStop(4);
}

hope this helped :)

shouldn't it be:

onClipEvent(load){
this.stop();
}
on(rollOver){
this.gotoAndStop(2);
}
on(rollOut){
this.gotoAndStop(2);
}
on(press){
this.gotoAndStop(4);
}

huh? please tell me, 'cause it ain't workin' now

[Johnny]

At 8/28/05 07:35 PM, ReNaeNae wrote: ...so, say you have a button set up the way you described... on over you want a long box to slide out from behind it... and when you move away from the button, the long box would retract. How would you get it to retract smoothly... from any point... if the viewer moves the mouse away before the long box is fully out? ...I know I didn't explain that very well, but hopefully you get what I mean!

Someone correct me, but could you use

CurrentFrame --

I know the syntax is screwy, and no MC is referenced, but would that work?

[Rantzien]

At 12/15/05 02:43 AM, Johnny_Krysys wrote: CurrentFrame --
I know the syntax is screwy, and no MC is referenced, but would that work?

No. _currentframe is read only. But you can use it like this:

gotoAndStop (_currentframe-1);

But in that case, you would rather use:

prevFrame ();

In the sense that Renae asked, a valid way could be having this on the movie clip:

on (rollOver, dragOver) {
delete onEnterFrame;
play ();
}
on (rollOut, dragOut) {
stop ();
this.onEnterFrame = function () {
prevFrame ();
};
}

Then on the first frame of the movie clip, you would have:

delete onEnterFrame;

And on the last:

stop ();

[Goldencat]

At 8/28/05 05:29 PM, Inglor wrote:

then give it (the main movieclip) these actions

What do you mean by "the main movieclip"? I just opened up the movieclip that has all of the other movieclips and I put it on the first frame of that movieclip, as I can see nowhere else to put it. When I do that it messes up.

Here are the errors:

**Error** Symbol=Button, layer=Layer 1, frame=1:Line 2: Clip events are permitted only for movie clip instances
onClipEvent(load){

**Error** Symbol=Button, layer=Layer 1, frame=1:Line 5: Mouse events are permitted only for button instances
on(rollOver){

**Error** Symbol=Button, layer=Layer 1, frame=1:Line 8: Mouse events are permitted only for button instances
on(rollOut){

**Error** Symbol=Button, layer=Layer 1, frame=1:Line 11: Mouse events are permitted only for button instances
on(press){

Total ActionScript Errors: 4 Reported Errors: 4

[Goldencat]

Okay, I've fixed the problem I was having earlier by clicking on my button while in the main timeline, selecting "actions", and copying and pasting. I was messing up because of a typo that was listed in another post. Now I'm wondering how I can make my button into a button, that is, how can I make it go somewhere? I changed the part where the original topic starter put:

on(press){
gotoAndStop(4);
}

into:

on(press){
gotoAndPlay("Scene 1",2);
}

and I'm having no luck in making it work. I went to the link that the topic starter gave (the one about the gotoAndPlay commands) and that thread said that gotoAndPlay commands won't work within movie clips. So it seems like I'm totally screwed. I would appreciate help on this.

[Devenger]

Why not try replacing the gotoAndPlay(4) with

on(press){
_root.gotoAndPlay("Scene 1",2);
}

Otherwise you are telling the movieclip to go to a different scene, which won't at all work. :\

[Claxor]

If you name the frame labels "_up", "_over" and "_down", adding an on(press) or an action at the like will make it automaticly go to the right frame (I think). I didn't read through the whoe tutorial properly, so exuse me if im off subject :/

[Rookie209]

I keep getting an error message that's telling me that these actions belong to a button instance clip.

[BlackmarketKraig]

At 3/5/06 12:54 AM, Rookie209 wrote: I keep getting an error message that's telling me that these actions belong to a button instance clip.

Did you change anything? They should be applicable to any movie clip.

[Rookie209]

At 3/5/06 02:23 AM, BlackmarketKraig wrote:

At 3/5/06 12:54 AM, Rookie209 wrote: I keep getting an error message that's telling me that these actions belong to a button instance clip.

Did you change anything? They should be applicable to any movie clip.

No.

[Goldencat]

At 1/14/06 02:44 PM, Devenger wrote: Why not try replacing the gotoAndPlay(4) with

on(press){
_root.gotoAndPlay("Scene 1",2);
}

Otherwise you are telling the movieclip to go to a different scene, which won't at all work. :\

I've tried that and it doesn't work. Whenever I click on my button it just sits there looking stupid even if I explicitely add code that makes it go somewhere.

I tried putting these codes on frame four of my button movie-clip and none of them work:

gotoAndPlay("Scene 1", 434);

_root.gotoAndPlay("Scene 1", 434);

_parent.gotoAndPlay("Scene 1", 434);

this._parent.gotoAndPlay("Scene 1", 434);

I've tried adding these codes to the entire movie clip in the place of " on(press){
gotoAndStop(4);
} "
that inglor had as his last code thing:

on(press){
_root.gotoAndPlay("Scene 1", 434);
}

on(press){
_parent.gotoAndPlay("Scene 1", 434);
}

on(press){
this._parent.gotoAndPlay("Scene 1", 434);
}

Absolutely nothing works. I don't know what to do. I've tried everything and flash doesn't want to acknowledge any of my code and do what I want it to do.

[Goldencat]

At 3/11/06 07:03 PM, SugarHill wrote:

At 1/14/06 02:44 PM, Devenger wrote:

Absolutely nothing works. I don't know what to do. I've tried everything and flash doesn't want to acknowledge any of my code and do what I want it to do.

Okay, I've got it to work now. My problem was that I was using:

on(press){
_root.gotoAndPlay("Scene 1", 434);
}

when I should've been using:

on(press){
_root.gotoAndPlay(434);
}

Apperently if you put the scene in with the frame, then it doesn't work. That is incredibly fucking stupid on the part of flash, but at least I got it to work.

[ChocloMan]

Why, thanks. I've always wanted to know how to do that...

[BlackmarketKraig]

I've been using this tutorial for animated buttons for quite some time and have been pleased with the results. Using MC's as a replacement for buttons adds a lot of funcionality that wouldn't be availible otherwise.

However, I'd like to know if there is an easy way (there must be) to define the hit area for the main MC. I have always used a shape on the top layer with 0% alpha fill to be my hit area and use it on all frames of the MC, but now I would like some of the MC's animation to go beyond the defined hit area and not have it as part of the button. The only way I know how to do this is by having two separate MC's, one for the hit area and another for the animation linked with action script, but it just seems kind of clunky and inefficient. Is there an easier way?

[Kawawawa]

Ok, now what exactly do you do to make it go somewhere? Do you have to animate that in the 'Down' frame as well? And what about going back to a main screen? Sorry, I'm new to AS.

[DeltaSt0rm]

Nice tut :)

[howelone]

The button works great; the animations play smoothly and it looks great. But I don't know how to make the button do stuff. Like where would I put the play(); command to make the button a start/stop button?

Sorry for the noob question

Mike

[zjD]

@ReNaeNae (and others):

I'm new here, so I don't want to intrude... but here's a timeline-less AS2 approach.

1- Make your graphic; turn it into a movieclip. Right-click on it in the library, select "Linkage...", select Export for Actionscript, and fill in the AS 2.0 Class with "BounceBox." Identifier doesn't really matter.

2- Make your slider inside that movieclip. Make it a movieclip as well; give it an instance name of "bar". Line up the centers of the two movieclips.

3. Now make an external AS file called BounceBox (in the same folder), and put this code in it:

class BounceButton extends MovieClip{

var bar:Object;
var over:Boolean = false;

// play with these three to get the effect you want
var speed:Number = .15
var extendTo:Number = 50;
var retractTo:Number = 0;

function onRollOver(){over = true;}
function onRollOut(){over = false;}

function onEnterFrame(){
var target = over ? extendTo : retractTo;
var dist:Number = target - this.bar._x;
if (dist > 1 || dist < -1){
this.bar._x += (target - this.bar._x) * speed;
}
}
}

4- Save.

5. Test.

6. Voila. No timelines. Now mess with all those number values at the top of the class and see what happens.